<template>
  <div
    class="page__wrap"
    :class="{
			'center': position === 'center',
			'left': position === 'left',
			'right': position === 'right',
      'padding': background
		}"
  >
    <!-- <span class="total">共{{ total }}条数据，每页显示</span> -->
    <el-pagination
      v-if="total"
      :current-page="page"
      :page-sizes="pageSizes"
      :page-size="limit"
      :total="total"
      :background="background"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :layout="layout"
    ></el-pagination>
  </div>
</template>
<script>
/**
 * @param { position } String 分页所在位置 center left right 可选 默认 center
 * @param { pageSizes } Array 分页可选条数
 * @param { layout } String 组件布局，子组件名用逗号分隔 sizes, prev, pager, next, jumper, ->, total, slot
 * @param { page } Object
 *      {
 *          currentPage: 1, //当前页数
 *           pageSize: 10, // 每页展示条数
 *          total: 100, // 总条数
 *      }
 * @method handleSizeChange 改变每页条数
 * @method handleCurrentChange 分页改变
 */
export default {
  name: "Pagination",
  props: {
    position: {
      type: String,
      default: "right"
    },
    total: Number, // 总条数
    page: Number, // 当前页数
    limit: Number, // 每页展示条数
    pageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 50, 100];
      }
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper"
    },
    background: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 改变每页条数
    handleSizeChange(pageSize) {
      this.$emit('update:page', 1)
      this.$emit('update:limit', pageSize);
      this.$emit('get-list')
    },
    // 翻页
    handleCurrentChange(currentPage) {
      this.$emit('update:page', currentPage)
      this.$emit('get-list')
      
    }
  }
};
</script>
<style lang="scss" scoped>
.page__wrap {
  display: flex;
  align-items: center;
  .total {
    color: #666;
    font-size: 14px;
  }
  &.padding {
    padding: 15px;
  }
  &.center {
    justify-content: center;
  }
  &.left {
    justify-content: flex-start;
  }
  &.right {
    justify-content: flex-end;
  }
}
/deep/ .el-pagination {
  font-weight: 400;
}
</style>